<template xmlns:el-col="http://www.w3.org/1999/html">
    <section>
        <el-col>
            <el-tabs v-model="activeNames" type="card" style="height:110px;">
                <el-tab-pane label="合同信息" name="1"><div><base-info :con_info="con_info"></base-info></div></el-tab-pane>
                <el-tab-pane label="合同日志" name="2"><div><log-list :contract_logs="contract_logs"></log-list></div></el-tab-pane>
                <br/><br/><br/><br/><br/><br/><br/>
            </el-tabs>
        </el-col>
        <el-col :span="1" :push="22" style="margin-top: -7%;">
            <el-button size="mini" @click="$router.back(-1)">返回</el-button>
        </el-col>
    </section>
</template>
<script>

    import detailsBaseInfo from './DetailsBaseInfo';
    import detailsLogList from './DetailsLogList';
    import * as API from '../../api/contract_api';
    import * as commons from '../../common/js/commons';
    import dict from '../../common/js/dict';

    export default {
        data () {
            return {
                activeNames:'1',//tabs 第一个tab展开
                contract_id: '',
                con_info: {},
                contract_logs: []
            }
        },
        components:{
            'base-info': detailsBaseInfo,
            'log-list': detailsLogList
        },
        methods: {
            fetchData(){
                this.contract_id = this.$route.params.id;
                this.getItem();
            },
            getItem(){
                API.contractInfo({"id":this.$route.params.id}).then((res)=>{
                    let result = JSON.parse(res.data.datas);

                    if(res.data.status == 200){
                        this.con_info = result;
                        this.contract_logs = result.open_state_log;

                    }else{
                        if(res.data.status === 401){
                            this.$router.push('/login');
                        }
                        this.$message.error(res.data.status+" "+res.data.msg);
                    }
                });
            }
        },
        watch: {
            // 监测路由变化,只要变化了就调用获取路由参数方法将数据存储本组件即可
            '$router': 'fetchData'
        },
        mounted() {
            this.$nextTick(function(){
                this.getItem();
            });
        }
    }
</script>

<style lang="scss">
    .el-button {
        margin: 4px !important
    }
    .el-table .cell
    {
        padding-left:5px!important;
        padding-right:5px!important;
    }
</style>